<!doctype html>
<html lang="en" class="dark font-sans antialiased">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/component.css" rel="stylesheet" />
    <script src="/component.js" defer></script>
  </head>
  <body class="flex min-h-screen items-center justify-center p-6">
    <div class="max-w-md text-center">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        class="mx-auto size-20 text-gray-400 dark:text-gray-500"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M9 8.25H7.5a2.25 2.25 0 0 0-2.25 2.25v9a2.25 2.25 0 0 0 2.25 2.25h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25H15m0-3-3-3m0 0-3 3m3-3V15"
        />
      </svg>

      <h2 class="mt-6 text-2xl font-bold text-gray-900 dark:text-white">Upload your files</h2>

      <p class="mt-4 text-pretty text-gray-700 dark:text-gray-200">
        Drag and drop files here or click to browse your computer.
      </p>

      <label
        for="files"
        class="mt-6 block rounded-lg border-2 border-dashed border-gray-300 p-6 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:hover:bg-gray-800/50"
      >
        <span class="text-sm font-semibold text-indigo-600 dark:text-indigo-500">
          Choose files
        </span>

        <input type="file" id="files" class="sr-only" />
      </label>

      <p class="mt-6 text-sm text-gray-700 dark:text-gray-200">
        Maximum file size: 10MB. Supported formats: PDF, DOCX, XLSX
      </p>
    </div>
  </body>
</html>
